<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="
        list.filter(
          (data) =>
            !search ||
            data.className.toLowerCase().includes(search.toLowerCase())
        )
      "
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <!-- width="95" -->
      <el-table-column align="center" label="类别">
        <template slot-scope="scope">
          {{ scope.row.className }}
        </template>
      </el-table-column>
      <el-table-column label="平均颜色" align="center">
        <template slot-scope="scope">
          <el-button
            round
            size="medium"
            :style="{
              background: scope.row.color,
              padding: '7px',
              height: '30px',
              width: '30px',
            }"
          ></el-button>
        </template>
      </el-table-column>
      <!-- width="200" -->
      <el-table-column label="XXYY" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.xxyy }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收集图片" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.img" :style="{ height: '120px' }" />
        </template>
      </el-table-column>
      <el-table-column label="分割图片" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.cutImg" :style="{ height: '100px' }" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="循迹模式">
        <template slot-scope="scope">
          {{ scope.row.tankStatus }}
        </template>
      </el-table-column>
      <el-table-column label="收集时间" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.date }}
        </template>
      </el-table-column>
      <el-table-column align="center">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入类别搜索" />
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="todelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getList, deleteInfo } from "@/api/table";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      search: "",
      list: [],
      listLoading: false,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // this.listLoading = true
      getList().then((response) => {
        this.list = response.data;
      });
    },
    todelete(row) {
      deleteInfo(row.id).then((res)=>{
        this.fetchData();
      })
    },
  },
};
</script>
<style scoped>

</style>
